import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import { createApp, ref, h } from 'vue';
import DemoNode from './index.vue';

class VueHtmlNode extends HtmlNode {
  constructor(props) {
    super(props)
 
    this.isMounted = false
    this.r = h(DemoNode, {
      properties: props.model.getProperties(),
      nodeData: {a:1}
    })
    this.app = createApp({
      render: () => this.r
    })
  }
 shouldUpdate() {
    const data = {
      ...this.props.model.properties,
    };
    if (this.preProperties && this.preProperties === JSON.stringify(data)) return;
    this.preProperties = JSON.stringify(data);
    return true;
  }
  setHtml(rootEl) {
    if (!this.isMounted) {
      this.isMounted = true
      const node = document.createElement('div')
      //为该节点设置宽高
      node.style.width = `100%`
      node.style.height = `100%`
      rootEl.appendChild(node)
      this.app.mount(node)
    } else {
      this.r.component.props.properties = this.props.model.getProperties()
        this.r.component.props.isSelected = this.props.model.isSelected;
      this.r.component.props.isHovered = this.props.model.isHovered;
    }
  }
}

class VueHtmlNodeModel extends HtmlNodeModel {
  setAttributes() {
    this.width = 160;
    this.height = 50;
    this.text.editable = false;
    this.inputData = this.text.value
  }

  getOutlineStyle() {
    const style = super.getOutlineStyle();
    style.stroke = 'none';
    style.hover.stroke = 'none';
    return style;
  }
}

export default {
  type: 'DemoNode',
  model: VueHtmlNodeModel,
  view: VueHtmlNode
}